<template>
    <!-- highlight-current-row -->
    <!-- @current-change="highlightChange" -->
  <div class="table-box modal-table-box">
    <el-table :data="tableGroupData.tableData"
    @row-click="handleClick"
     style="width:99%" class="table">
      <el-table-column
        type="selection"
        width="55" v-if="showSelection">
      </el-table-column>
      <el-table-column v-for="(item,index) in tableGroupData.columnsData"  :key="index"
        :prop="item.propValue"
        :width="item.width?item.width:'auto'"
        :label="item.name">
        <template slot-scope="scope">
          <img v-if="scope.row[item.propValue] && scope.row[item.propValue].toString().startsWith('data:image')"
            :src="scope.row[item.propValue]" class="img-type">
          <span :style="{'color':item.openColor?scope.row.color:''}" v-else>{{scope.row[item.propValue]}}</span>
        </template>
      </el-table-column>
      <el-table-column
         label="操作"
         fixed="right"
         :width="tableGroupData.operationWidth?tableGroupData.operationWidth:'200'"
         prop="operation" v-if="tableGroupData.isOperation">
         <template slot-scope="scope">
           <div  class="operation-box">
             <el-button type="text" size="small" :class="['btn',sub.color]"
             v-for="(sub,i) in scope.row.operationArr" :key="i"
             @click="clickButton(scope.row,sub)"
             >{{sub.text}}</el-button>
           </div>
         </template>
       </el-table-column>
    </el-table>
    <el-pagination class="table-pagination pagination-front" v-if="pageshow&&!hidePagination&&!pageOptions"
    @size-change="handleSizeChange" @current-change="handleCurrentChange"
     :current-page="page.crnPage" :page-sizes="[5, 10, 15, 20]" :page-size="page.size" layout="total, sizes, prev, pager, next, jumper"
      :total="page.allCnt">
    </el-pagination>
    <el-pagination class="table-pagination pagination-back" v-if="pageshow&&pageOptions"
    @size-change="backSizeChange" @current-change="backCurrentChange"
     :current-page="pageData.currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="pageData.pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="pageData.total">
    </el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableGroupData:this.tableData,
      currentRow: null,
      currentItem: null,
      pageData:this.pageOptions||{
        pageNum: 1,
        pageSize: 10,
        total:0,
        currentPage:1
      },
      pageshow:true,
      tableOptions:[],
      page: {
        allCnt: 10,
        allPage: 2,
        crnPage: 1,
        size: 5
      },
    }
  },
  props: {
      hidePagination:{
        type:Boolean
      },
      showSelection:{
        type:Boolean
      },
      showTotal:{
        type:Boolean
      },
      pageOptions: {
          type: Object
      },
      tableData: {
          type: Object
      }
  },
  watch: {
      pageOptions(optionData){
        this.pageData=optionData
      },
      tableData(optionData) {
        this.tableOptions=JSON.parse(JSON.stringify(optionData.tableData))

        this.tableGroupData=optionData

        // 前端分页
        if(!this.pageOptions){
          let tableData=optionData.tableData
          if(this.hidePagination){
            this.tableGroupData.tableData = tableData
          }else{
            let size=this.page.size>tableData.length?tableData.length:this.page.size

            this.tableGroupData.tableData = tableData.slice(0,size)
          }

          // 设置分页信息
          this.pageshow=false
          //重新渲染分页
          this.$nextTick(() => {
            this.pageshow = true
            this.page={
              allCnt: tableData.length,
              allPage: Math.ceil(tableData.length/this.page.size),
              crnPage: 1,
              size: this.page.size
            }
          })
        }
      }
  },
  created(){
    // 前端分页
    if(!this.pageOptions){
      this.tableOptions=JSON.parse(JSON.stringify(this.tableData.tableData))

      let tableData=this.tableData.tableData
      let size=this.page.size>tableData.length?tableData.length:this.page.size

      this.tableGroupData.tableData = tableData.slice(0,size)
      // 设置分页信息
      this.page={
        allCnt: tableData.length,
        allPage: Math.ceil(tableData.length/this.page.size),
        crnPage: 1,
        size: this.page.size
      }
    }
  },
  methods: {
    handleClick(row) {
      this.currentItem=row
      this.$emit('watchTable',this.currentItem,{type:'check'});
    },
    clickButton(row,btn){
      this.$emit('watchTable',row,btn);
    },
    highlightChange(val) {
        this.currentRow = val;
    },
    // 前端换页
    handleCurrentChange(currentPage) {
      // console.log(currentPage);
      if(this.page.size>this.tableOptions.length){
        return
      }
      let satrt=this.page.size*(currentPage>1?currentPage-1:0)
      let end=satrt+this.page.size
      end=end>this.tableOptions.length?this.tableOptions.length:end

      this.tableGroupData.tableData = this.tableOptions.slice(satrt,end)

    },
    // 前端每页个数
    handleSizeChange(size) {
      // console.log(size,99);
      this.page.size=size
      this.page.crnPage=1
      this.pageshow=false
      this.$nextTick(() => {//重新渲染分页
        this.pageshow = true
        let newSize=size>this.tableOptions.length?this.tableOptions.length:size

        this.tableGroupData.tableData = this.tableOptions.slice(0,newSize)
      })
    },

    // 后端换页
    backCurrentChange(currentPage) {
      console.log(currentPage);
      this.$emit('watchTable',currentPage,{type:"currentPage"});
      // if(this.page.size>this.tableOptions.length){
      //   return
      // }
      // let satrt=this.page.size*(currentPage>1?currentPage-1:0)
      // let end=satrt+this.page.size
      // end=end>this.tableOptions.length?this.tableOptions.length:end
      //
      // this.tableGroupData.tableData = this.tableOptions.slice(satrt,end)

    },
    // 后端每页个数
    backSizeChange(size) {
      console.log(size,99);
      this.$emit('watchTable',size,{type:"pageSize"});
      this.pageshow=false
      this.$nextTick(() => {//重新渲染分页
        this.pageshow = true
      })
    },
    handleSelectionChange(val){
      let arr=[]
      val.map((item,index)=>{
        arr.push(item.id)
      })
      this.$emit('watchTable',arr,{type:"D"});
    },
    tableRowClass({
      row,
      rowIndex
    }) {
      if (rowIndex % 2 !== 0) {
        return 'active-row'
      }
      return ''
    }
  },
}
</script>
<style lang="less">

.modal-table-box{
  flex: 1;
  padding-bottom: 50px;
  position: relative;
  .el-table__body tr.current-row>td{

  }

  .el-table__row el-table__row--striped {
      background-color: red;
  }
  .active-row {
      background-color: #E6F9FF !important;
  }
  .hover-row:hover,
  .hover-row:hover > td {
      background-color: #F5F7FA !important;
  }
  .img-type{
    width: 100%;
    height: 50px;
    display: block;
  }

  .btn{
    margin:0 !important;
    span{
      border-right: 1px solid #E4E7ED;
      padding: 0 5px;
      font-size:14px;
      color: #0099FF;
    }
  }
  .operation-box>.btn:last-child span{
    border-right:none;
  }
  .el-table td, .el-table th.is-leaf{
    border-bottom: 1px solid #E4E7ED;
  }
  .el-table thead{
    color: #666;
    font-size:14px;
  }
  .el-table{
    color: #666;
    font-size:14px;
  }
  .danger>span{
    color: #F52032 !important;
  }
  .success>span{
    color: #5CD121 !important;
  }
  .warn>span{
    color: #FFBF40 !important;
  }
  .table-box{
    // height: 85%;
    flex: 1;
    padding-bottom: 50px;
    position: relative;
  }
  .table-pagination{
    position: absolute;
    right: 0px;
    bottom: 10px;
  }
  .table{
    width:auto !important;
    /* height: 100%; */
    overflow: auto;
    margin-top: 2px;
  }
  .el-table--border::after, .el-table--group::after, .el-table::before{
    background-color: transparent !important;
  }
  .table-box .el-table--scrollable-x .el-table__body-wrapper{
    /* min-height: 90%; */
  }
  .table-box .el-table__footer-wrapper,.table-box .el-table__header-wrapper{
    /* min-height: 10%; */
  }
  .el-table__fixed-right::before, .el-table__fixed::before{
    height:0;
  }
}
</style>
